{% extends "admin/base_site.html" %}

{% block breadcrumbs %}{% endblock %}
{% block content %}
<script type="text/javascript">
	$(function () {
		$('#left-nav [href="/admin/studio/studio/"]').parents('li').addClass('active')
	})
	
	$(function () {
		new Vue({
			el:'#vue_content',
			data:{
				studio:''
			},
			methods:{
				save:function () {
					var post_data={
						add_studio:{name:this.studio}
					}
					$.post('',JSON.stringify(post_data),function (data) {
						if (data.msg){
							alert(data.msg)
						}else if(data.add_studio.errors){
							alert(data.add_studio.errors)
						}else{
							location=data.add_studio.edit_url
						}
					})
				}
			}
		})
	})
</script>

<template id='table_head'>
	<thead>
		<tr>
			<th v-for='h in heads'>[[h.label]]</th>
		</tr>
	</thead>
</template>


<div id='vue_content'>
	
	<div id='iwrap'>
		<h2 id='big-head'>Select Studio</h2> 
		

		<!--<select name="" id="" width='300px' v-model='studio'>
			{% for studio in studios %}
			<option value="{{studio}}">{{studio}}</option>
			{% endfor %}
		</select>-->
		<form action="" method="post" id='iform'>
			
			{{ form.name }}
			{{form.name.errors}}
			<input id='isave' type="submit" name="test" class="btn btn-success" value="save" />
		</form>

		<p id='dsp'>Select studio from the available studio</p>
	</div>
	
<!--<button name="test" type="button" value="val" @click="save()">Save</button>-->

	
</div>
<style type="text/css" media="screen" id="test">
	#iwrap{
		margin-top:30px;
		height:200px;
		text-align: center;
		/*position: relative;
		left:-40px;*/
	}
	#dsp{
		margin-top:10px;
	}
	#big-head{
		font-size:200%;
	}
	#iform{
		margin-top:30px;
	}
	#id_name{
		width:400px;
		height:30px;
		font-size:120%;
		
	}
	#isave{
		margin-left:20px;
	}
</style>

{% endblock %}